<template>
    <div class="search">
        <!-- 搜索栏 -->

        <van-search v-model="keyword" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
       
      <div v-if="1">
        
      </div>
      <div>
         <!-- 下拉菜单组件 -->
          <Dropmenu 
        :filterCategory="filterCategory"
        @transfer="changePriceFn"
        @transfer1="changeKindFn"
        >
        </Dropmenu>
        
        <!-- 商品列表组件 -->
        <GoodsList :goodsList="goodsList"></GoodsList>
      </div>
    </div>
</template>
<script>
//引入下拉菜单组件
import Dropmenu from "@/components/Dropmenu.vue";
//引入商品列表页组件
import GoodsList from "@/components/GoodsList.vue"
//引入商品搜索接口
import { searchgoods } from "@/utils/http"
export default {
    name: '',
    props: [''],
    data() {
        return {
            keyword: '', //搜索的关键字
            page: 1, //默认页数
            size: 10, //每页多少条数据
            order: "desc", //desc 由高到低 asc 由低到高
            categoryId: 0, //商品类别id 全部 居家 服装 配件...
            sort: "id", //排序方式 根据分类id 还是根据价格price 
            goodsList: [],//商品列表数据
            filterCategory:[] ,//所有分类的类别
            show: false
        }
    },
    components: {
        Dropmenu, //下拉菜单组件
        GoodsList,//搜索组件

    },
    watch: {},
    methods: {
        getData() {
            //获取商品列表
            let params = {
                keyword: this.keyword, //搜索的关键字
                page: this.page, //默认页数
                size: this.size, //每页多少条数据
                order: this.order, //desc 由高到低 asc 由低到高
                categoryId: this.categoryId, //商品类别id 全部 居家 服装 配件...
                sort: this.sort, //排序方式 根据分类id 还是根据价格price 
            }
            searchgoods(params).then((res) => {
                console.log(res);
                this.goodsList = res.data.data.goodsList
                this.filterCategory = res.data.data.filterCategory
                // console.log(111,this.filterCategory);
                //将filterCategory 这个数组中的所有name 替换成 text 将id 换成value属性 利用字符串的replace 方法
                this.filterCategory = JSON.parse(
                    JSON.stringify(this.filterCategory)
                    .replace(/name/g,'text')
                    .replace(/id/g,'value')
                );
            });
        },
        onSearch() {
            //点击搜索触发
            this.getData()
          
        },
        onCancel() {
            //点击取消触发
            this.$router.go(-1)
        },
        changePriceFn(m){
            //切换价格排序触发事件
            console.log(m);
            this.order = m
            this.sort = 'price'
            //修改完参数，重新获取数据
            this.getData()
        },
        changeKindFn(n){
            //切换类别触发的事件
            this.categoryId = n;
            this.sort = 'id';
            //根据修改完的数据重新渲染请求
            this.getData()
        }
    },

    created() {
        //初始化获取商品
    this.getData()
    },
};
</script>
<style scoped>
</style>